;
(function() {
  new Vue({
    el: '#template-preview',
    data: {
      templateId:hlUrlUtil.GetQueryString('templateId'),
      pageStyle:{},
      pageLeft:[],
      pageRight:[],
      pageTop:[],
      pageBottom:[],
      templateValue: [],
      headPerData: [],
      footerPerData:[],
      tbTitleLength:0,
      tbHead:[],
      tbContent:[],
      watermarkData:[],
      watermarkStyle:[],
      moduleName:null,
      quanxian: JSON.parse(window.localStorage.getItem('permissions'))
    },
    filters: {
      formatUndefined: function(item) {
        if (!item && item != 0) return '--'
        return item
      }
    },
    methods: {
      getTemplateName() {
        var self = this;
        hlhttp.get({
          url:'bill/print_template',
          data:{'template_id':self.templateId},
          success:function(data){
            // 模版名
            self.moduleName = data.name
            // 页边距
            var pageData = data.page[0];
            self.pageStyle = {
              'paddingLeft':pageData.eleMarginLeft + 'px',
              'paddingRight':pageData.eleMarginRight + 'px',
              'paddingTop':pageData.eleMarginTop + 'px',
              'paddingBottom':pageData.eleMarginBottom + 'px'
            }
            // 水印图片
            data.image.forEach((el,i) => {
              var obj = {
                'url':el.eleValue ,
                'width':el.eleWidth + '',
                'height':el.eleHeight + '',
                'opacity':el.eleOpacity + '',
                'left':el.eleMarginLeft + '',
                'right':el.eleMarginRight + '',
                'top':el.eleMarginTop + '',
                'bottom':el.eleMarginBottom + ''
              }
              var objStyle = {
                'url':el.eleValue ,
                'width':el.eleWidth + 'px' ,
                'height':el.eleHeight + 'px',
                'opacity':el.eleOpacity,
                'left':el.eleMarginLeft ? el.eleMarginLeft + 'px' : null,
                'right':el.eleMarginRight ? el.eleMarginRight + 'px' : null,
                'top':el.eleMarginTop ? el.eleMarginTop + 'px' : null,
                'bottom':el.eleMarginBottom ? el.eleMarginBottom + 'px' : null
              }
              self.watermarkData.push(obj)
              self.watermarkStyle.push(objStyle)
            })

            // 头部
            var headData = [];
            if (data.head.length) headData = hlArrayUtil.splitInToTwoimensionalArray(data.head, 3);

            // 去除掉空格占位符
            var tmpHeadArr = [];
            headData.forEach((el, i) => {
              var tmpArr = [];
              var blankNum = 0;

              el.forEach((item, index) => {
                if (item.eleType === 'sys') item['eleVal'] = self.matchTemplateVal(item.eleValue)
                if (item.eleType === 'ph') blankNum++;
              })

              // 该循环用来分配每个要展示的模块的所占比例
              el.forEach((item,index) => {
                if(blankNum == 0) item['width'] = 'w33'
                if(blankNum == 1 && item.eleType == 'ph') item['width'] = 'w00'
                if(blankNum == 1 && item.eleType != 'ph') item['width'] = 'w50'
                if(blankNum == 2 && item.eleType == 'ph') item['width'] = 'w00'
                if(blankNum == 2 && item.eleType != 'ph') item['width'] = 'w100'
                if(blankNum == 3) item['width'] = 'w33'
                tmpArr.push(item)
              })
              tmpHeadArr.push(tmpArr)

            })
            self.headPerData = tmpHeadArr;
            // 收费表格
            var tmpContentArr = data.content;
            self.tbTitleLength = 0;
            data.content.forEach((el,i) => {
              if(el.eleShow == 'Y') self.tbTitleLength++;
            })
            self.tbHead = tmpContentArr;

            var allTbContent = self.templateValue.expenses;
            var tmpTbContent = [];
            var payedTotalPrice = 0,receiveTotalPrice = 0,totalPrice = 0,receiveOriginalTotalPrice = 0,receiveDiscountTotalPrice = 0;

            allTbContent.forEach((el,i) => {
              var arr = [];
              self.tbHead.forEach((item,index) => {
                let eleValue = item.eleValue
                arr.push({'value':el[eleValue],'eleShow':item.eleShow})

                if(eleValue == 'amountReceive'){
                  totalPrice = totalPrice + Number(el.amountReceive)
                }
                if(eleValue == 'amountPayed'){
                  payedTotalPrice = payedTotalPrice + Number(el.amountPayed)
                }
                if(eleValue == 'amountTpay'){
                  receiveTotalPrice = receiveTotalPrice + Number(el.amountTpay)
                }
                if (eleValue == 'amountReceiveOriginal'){
                  receiveOriginalTotalPrice = receiveOriginalTotalPrice + Number(el.amountReceiveOriginal)
                }
                if (eleValue == 'amountReceiveDiscount'){
                  receiveDiscountTotalPrice = receiveDiscountTotalPrice + Number(el.amountReceiveDiscount)
                }
              })
              tmpTbContent.push(arr)
            })
            // 新增一行计算总价钱
            var lastArr = [];
            self.tbHead.forEach((item,index) => {
              let eleValue = item.eleValue, eleValueArr = ['name','amountReceive','amountPayed','amountTpay','amountReceiveOriginal','amountReceiveDiscount']
              if(eleValueArr.indexOf(eleValue) == -1){
                lastArr.push({ 'value': '', 'eleShow': item.eleShow })
              }
              // 费项那一列新增一行显示合计
              if (eleValue == 'name') lastArr.push({'value': '合计','eleShow': item.eleShow})
              if(eleValue == 'amountReceive') lastArr.push({'value': totalPrice.toFixed(2) , 'eleShow':item.eleShow})
              if(eleValue == 'amountPayed') lastArr.push({'value': payedTotalPrice.toFixed(2) , 'eleShow':item.eleShow})
              if(eleValue == 'amountTpay') lastArr.push({'value': receiveTotalPrice.toFixed(2) , 'eleShow':item.eleShow})
              if(eleValue == 'amountReceiveOriginal') lastArr.push({'value': receiveOriginalTotalPrice.toFixed(2) , 'eleShow':item.eleShow})
              if(eleValue == 'amountReceiveDiscount') lastArr.push({'value': receiveDiscountTotalPrice.toFixed(2) , 'eleShow':item.eleShow})
            })
            tmpTbContent.push(lastArr)
            self.tbContent = tmpTbContent;

            // 尾部
            var footerData = [];
            if(data.tail.length) footerData = hlArrayUtil.splitInToTwoimensionalArray(data.tail, 3);
            // 去除掉空格占位符
            var tmpFooterArr = [];

            footerData.forEach((el, i) => {
              var tmpArr = [];
              var blankNum = 0;

              el.forEach((item, index) => {
                if (item.eleType === 'sys') item['eleVal'] = self.matchTemplateVal(item.eleValue)
                if (item.eleType === 'ph') blankNum++;
              })

              // 该循环用来分配每个要展示的模块的所占比例
              el.forEach((item,index) => {
                if(blankNum == 0) item['width'] = 'w33'
                if(blankNum == 1 && item.eleType == 'ph') item['width'] = 'w00'
                if(blankNum == 1 && item.eleType != 'ph') item['width'] = 'w50'
                if(blankNum == 2 && item.eleType == 'ph') item['width'] = 'w00'
                if(blankNum == 2 && item.eleType != 'ph') item['width'] = 'w100'
                if(blankNum == 3) item['width'] = 'w33'
                tmpArr.push(item)
              })
              tmpFooterArr.push(tmpArr)

            })
            self.footerPerData = tmpFooterArr;
          }
        })
      },

      getTemplateVal() {
        var self = this;

        // 账单模版预览模拟数据1111
        var elementVal = {
          'projectName':'账单模版测试项目',
          'contractMCode':'C201712130160',
          'contractCCode':'账单模版测试合同编号',
          'contractName':'账单模版测试合同',
          'contractSignDate':'2017-12-12',
          'rentBeginDate':'2017-12-13',
          'rentEndDate':'2020-12-12',
          'rentDuration':'2017-12-13 到 2020-12-12',
          'customerName':'账单模版测试客户',
          'rentResources':'账单模版测试项目-金刚楼-3楼-A001、A002',
          'rentUnitAcreage':'100',
          'rentWpCount':'10',
          'rentStCount':'10',
          'billNo':'ar201712190043',
          'billDuration':'2017-12-13 至 2018-12-12',
          'currentDate':'2018-07-08',
          'currentTime':'2018-07-08 10:35',
          'currentOperator':'管理员',
          'bankName':'中国银行',
          'bankAccount':'6888 8888 8888 8888',
          'accountName':'1号楼资管云'
        }

        var expenses = [{
            'expenseType': 'R',
            'name': '固定租金',
            'paymentDeadline': '2017-12-23',
            'beginDate': '2017-12-13',
            'endDate': '2018-12-12',
            'expenseDuration': '2017-12-13 至 2018-12-12',
            'priceDay': '100',
            'rentPrice': '123',
            'priceMonth': '590',
            'rentUnitAcreage': '500',
            'amountTpay': '10000.00',
            'amountPayed': '6000.00',
            'amountReceive': '12000.00',
            'paymentState': 'WP',
            'amountReceiveOriginal': '18000',
            'amountReceiveDiscount': '10000',
          },
          {
            'expenseType': '2',
            'name': '水费',
            'paymentDeadline': '2017-12-23',
            'beginDate': '2017-12-13',
            'endDate': '2018-12-12',
            'expenseDuration': '2017-12-13 至 2018-12-12',
            'priceDay': '20',
            'rentPrice': '123',
            'priceMonth': '560',
            'rentUnitAcreage': '100',
            'amountTpay': '600.00',
            'amountPayed': '10.00',
            'amountReceive': '700.00',
            'paymentState': 'WP',
            'amountReceiveOriginal': '600',
            'amountReceiveDiscount': '500',
          },
          {
            'expenseType': 'R',
            'name': '电费',
            'paymentDeadline': '2017-12-23',
            'beginDate': '2017-12-13',
            'endDate': '2018-12-12',
            'rentPrice': '123',
            'expenseDuration': '2017-12-13 至 2018-12-12',
            'priceDay': '30',
            'priceMonth': '590',
            'rentUnitAcreage': '200',
            'amountTpay': '800.00',
            'amountPayed': '200.00',
            'amountReceive': '900.00',
            'paymentState': 'WP',
            'amountReceiveOriginal': '800',
            'amountReceiveDiscount': '600',
          }
        ]

        self.templateValue = {
          'element_val':elementVal,
          'expenses':expenses
        }
      },

      matchTemplateVal(code) {
        var result;
        var elementVal = this.templateValue.element_val;

        switch (code) {
          case 'projectName':
            result = elementVal.projectName
            break;
          case 'contractMCode':
            result = elementVal.contractMCode
            break;
          case 'contractCCode':
            result = elementVal.contractCCode
            break;
          case 'contractName':
            result = elementVal.contractName
            break;
          case 'contractSignDate':
            result = elementVal.contractSignDate
            break;
          case 'rentBeginDate':
            result = elementVal.rentBeginDate
            break;
          case 'rentEndDate':
            result = elementVal.rentEndDate
            break;
          case 'rentDuration':
            result = elementVal.rentDuration
            break;
          case 'customerName':
            result = elementVal.customerName
            break;
          case 'rentResources':
            result = elementVal.rentResources
            break;
          case 'rentUnitAcreage':
            result = elementVal.rentUnitAcreage
            break;
          case 'rentWpCount':
            result = elementVal.rentWpCount
            break;
          case 'rentStCount':
            result = elementVal.rentStCount
            break;
          case 'billNo':
            result = elementVal.billNo
            break;
          case 'billDuration':
            result = elementVal.billDuration
            break;
          case 'currentDate':
            result = elementVal.currentDate
            break;
          case 'currentTime':
            result = elementVal.currentTime
            break;
          case 'currentOperator':
            result = elementVal.currentOperator
            break;
          case 'bankName':
            result = elementVal.bankName
            break;
          case 'bankAccount':
            result = elementVal.bankAccount
            break;
          case 'accountName':
            result = elementVal.accountName
            break;
          default:
        }

        return result;
      },
      editTemplate(){
        hlUrlUtil.goTo('templateEdit',{'templateId':this.templateId,ddtab:true})
      }
    },
    created: function(){
      this.getTemplateVal()
    },
    mounted: function() {
      this.getTemplateName()
    }
  })
}())
